<template>
    <div>
        <div class="add">
            编号：<input type="text" v-model='code'>
            产品名称: <input type="text" v-model='productName'>
            <br>
            产品图片地址：<input type="text" v-model='imgsrc'>
            
            价格:<input type="text" v-model='price'>
            <input type="button" value="添加" @click="add">
        </div>
        <div class="add">
            品牌名称: <input type="text" placeholder="请输入名称">
        </div>

        <options @pro="produ"></options>
    </div>
</template>

<script>
import options from './options'
    export default {
        data(){
            return {
                code:'',
                productName:'',
                imgsrc:'',
                price:'',
                arr:[]
            }
        },
        components:{
            options
        },
        methods:{
            add(){
                let obj ={
                    id:Math.random().toString(16).substring(2),
                    imgsrc:this.imgsrc,
                    code:this.code,
                    price:this.price,
                    productName:this.productName,
                    count:1
                }
                this.arr.push(obj)
                localStorage.setItem('data',JSON.stringify(this.arr))
            },
           produ(input){
            console.log(input),
            this.arr = input
           }
        }
    }
</script>

<style scoped>
    .add {
        padding: 5px;
        border: 1px solid black;
        margin: 10px;
    }

</style>








